<script setup>
import HelloWorld from './components/HelloWorld.vue';
import Vmodle from './components/Vmodle.vue';
import Bisac from './components/Bisac.vue';
import SoltCom from './components/SoltCom.vue'
import SoltName from  './components/SoltName.vue'
import Demo from './components/Demo.vue';
import HomeWorkVue from './components/HomeWork.vue';
import Home from './views/home.vue'
import Vuex from './views/Vuex.vue'
</script>
<template>
  <!-- <HelloWorld msg="You did it!" /> -->
  <!-- <Vmodle /> -->
  <!-- <Bisac/> -->
  <!-- <SoltCom> -->
  <!-- </SoltCom> -->
  <!-- <SoltName/> -->
  <!-- <Demo/> -->
  <ul>
    <li>
      <router-link to="/home">home</router-link>
      <!-- <Home/> -->
    </li>
    <li>
      <router-link to="/about">about</router-link>
    </li>
    <li><router-link to="/user">user-center</router-link></li>
    <li><router-link to="/vuex">vuex</router-link></li>
    <li><router-link to="/listdemo">listdemo</router-link></li>
    <li><router-link to="/account">AccountList</router-link></li>
  </ul>
  <router-view></router-view>
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>
